import { useState, useEffect } from "react";
import { Space, Switch, Radio, Checkbox, Popover, Button, message } from "antd";
import { QuestionCircleFilled } from '@ant-design/icons';
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import { getBackflowConfig, updateBackflowConfig } from "../../service";

const LogisticsReturn = ({ tab }) => {
  const [backflowId, setBackflowId] = useState();
  const [radioValue, setRadioValue] = useState(1);
  const [switchValue, setSwitchValue] = useState(0);
  const [checkedList, setCheckedList] = useState(['1']);

  const getConfig = async () => {
    window.START_LOADING();
    const res = await getBackflowConfig();
    if(res.success) {
      setBackflowId(res.data.id);
      setSwitchValue(res.data.status);
      setRadioValue(res.data.backflowType);
      setCheckedList(res.data.orderType.split(','));
    }
    window.END_LOADING();
  }

  const updateConfig = async (params, type) => {
    window.START_LOADING();
    const res = await updateBackflowConfig(params);
    if (res.success) {
      message.success(type == 'save' ? '保存成功！' : (type ? '开启成功！' : '关闭成功！'));
      getConfig();
    }
    window.END_LOADING();
  }

  useEffect(() => {
    if(tab === '5') {
      getConfig();
    }
  }, [tab])

  const handleSave = () => {
    if(!checkedList.length) {
      message.warning('至少选择一种订单进行回传！');
      return;
    }
    updateConfig({
      id: backflowId,
      status: switchValue,
      backflowType: radioValue,
      orderType: checkedList.join(','),
    }, 'save')
  }

  const handleSwitchChange = (e) => {
    setSwitchValue(e ? 1 : 0)
    updateConfig({
      id: backflowId,
      status: e ? 1 : 0,
    }, e)
  }

  return (
    <Space direction="vertical" size={20}>
      <SubTitle
				title={
					<>
						运单号回传到卖家备注：
						<Switch
							checkedChildren="已开启"
							unCheckedChildren="已关闭"
              checked={switchValue ? true : false}
              onChange={handleSwitchChange}
							size="default"
						/>
					</>
				}
				symbol
				as="s2"
			/>
      <Space>
        <span>（1）回传备注方式：</span>
        <Radio.Group value={radioValue} onChange={(e) => setRadioValue(e.target.value)}>
					<Radio value={1}>追加回传到卖家备注</Radio>
					<Radio value={2}>覆盖原卖家备注</Radio>
				</Radio.Group>
      </Space>
      <Space>
        <span>（2）针对订单：</span>
        <Checkbox.Group value={checkedList} onChange={(e) => setCheckedList(e)}>
					<Checkbox value="1">
            <Popover 
              content={
                <div>
                  <p>回传文案：2024.08.05 15:31 预发货拆出新物流，</p>
                  <p>申通快递 123456789；</p>
                </div>
              }
              title={null}
            >
              之前已预回传的订单，拆分后的同商品的新订单
            </Popover>
            <Popover
              content={
                <>
                  <div>涉及场景：</div>
                  <div style={{ width: 300 }}>
                    1、之前已预回传的订单商品，拆单后的新订单发生回传。
                    <br />
                    2、多数量的商品订单、或者组合商品，拆单后的新订单，在订单回传过后再发生回传。
                  </div>
                </>
              }
              title={null}
            >
              <QuestionCircleFilled style={{ color: "#999", marginLeft: "8px" }} />
            </Popover>
          </Checkbox>
          <Checkbox value="2">
            <Popover 
              content={
                <div>
                  <p>回传文案：2024.08.05 15:31 补发订单，</p>
                  <p>申通快递 123456789；</p>
                </div>
              }
              title={null}
            >
              售后补发订单
            </Popover>
          </Checkbox>
          <Checkbox value="3">
            <Popover 
              content={
                <div>
                  <p>回传文案：2024.08.05 15:31 换货订单，</p>
                  <p>申通快递 123456789；</p>
                </div>
              }
              title={null}
            >
              售后换货订单
            </Popover>
          </Checkbox>
				</Checkbox.Group>
      </Space>
      <Button type="primary" onClick={handleSave}>
				保存
			</Button>
    </Space>
  )
}

export default LogisticsReturn;